<template>
	<view>
		<view class="header">
			<view>
				<uni-card  v-for="order in tableData" title="订单详情" :sub-title="order.orderDate" :extra="order.totaPrice+'元'">

					<view class="uni-body">
						<uni-row v-for="item in order.items">
						<uni-col :span="4">
							<image :src="item.goods.img" style="display: flex;width: 150rpx; height: 150rpx; margin: 10rpx;"></image>
						</uni-col>
						<uni-col :span="18">
						<view class="opi">
							<text class="uni-body">{{ item.goods.name }}</text>
						</view>
						<view class="opi">
							<text>￥{{ item.actualPrice }}</text>
						</view>
						<view class="opi">
							<text>份数：{{ item.count }}</text>
						</view>
						<view class="opi">
							<text>{{ item.remark }}</text>
						</view>
						<view class="opi">
							<text>{{ item.size }}</text>
						</view>
						</uni-col>
						</uni-row>
						<view v-if="order.isPay == '0'" style="color: red;">未支付</view>
						<view v-if="order.isPay == '1'" style="color: green;">已支付</view>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import  {API_HOST}  from  '/config/const.js'
	
	import {
		onMounted,
		ref
	} from 'vue';
	const tableData = ref([])

	onMounted(() => {
		query()
	})

	const query = () => {
		const info = uni.getStorageSync("loginUser");
		const curUser = JSON.parse(info)

		uni.request({
			url: `${API_HOST}/orders?memberId=${curUser.id}`,
			success: (res) => {
				tableData.value = res.data
			}
		})
	}
</script>

<style lang="scss" scoped>
.opi{
	display: flex;
	flex-wrap: wrap;
	margin-left: 100rpx;
}

</style>